<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<th:block th:include="include :: jasny-bootstrap-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: summernote-css" />
<body class="white-bg">
<div class="container-div">
	<div class="tabs-container">
		<div class="wrapper wrapper-content animated fadeInRight ibox-content">
			<form class="form-horizontal m" id="form-integralGoods-edit" th:object="${integralGoods}">

				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基础信息</a>
					</li>
					<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">商品详情</a>
					</li>
				</ul>

				<div class="tab-content">
					<div id="tab-1" class="tab-pane active">
						<div class="form-group"></div>
						<input id="companyId" name="companyId"  th:field="*{companyId}"  type="hidden">
						<input id="goodsId" name="goodsId" th:field="*{goodsId}"  type="hidden">
						<input id="goodsCover" th:field="*{goodsCover}" name="goodsCover" type="hidden"/>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>商品名称：</label>
							<div class="col-sm-6">
								<input id="goodsName" name="goodsName" th:field="*{goodsName}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>封面图：</label>
							<div class="col-sm-6">
								<div class="fileinput fileinput-new" data-provides="fileinput">
									<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
										<img id="imgsrc1" th:src="*{goodsCover}">
									</div>
									<div>
										<span class="btn btn-white btn-file"><span class="fileinput-new">选择封面图</span><span class="fileinput-exists">更改</span><input type="file" id="img"></span>
										<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
										<span style="width: 200px; height: 120px; color: red">请选择1M以内图片</span>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>轮播图：</label>
							<div class="col-sm-6">
								<input name="goodsRolling" id="goodsRolling" th:field="*{goodsRolling}" class="form-control" type="hidden"/>
								<div class="file-loading">
									<input id="fileinput-upload" type="file" multiple name="file">
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-6">
								<div th:each="attach : ${attachmentList}" style="display: flex">
									<a th:href="${attach.attachUrl}" th:text="${attach.attachTitle}"></a>&nbsp;&nbsp;<a th:data-id="${attach.attachId}" class="delResources" style="font-size: 3px;color: red;">删除</a>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>库存：</label>
							<div class="col-sm-6">
								<input id="inventory" name="inventory" th:field="*{inventory}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>市场价格：</label>
							<div class="col-sm-6">
								<input id="marketPrice" name="marketPrice" th:field="*{marketPrice}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>成本价格：</label>
							<div class="col-sm-6">
								<input id="costPrice" name="costPrice" th:field="*{costPrice}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>兑换积分：</label>
							<div class="col-sm-6">
								<input id="exchangeScore" name="exchangeScore" th:field="*{exchangeScore}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">配送方式：</label>
							<div class="col-sm-6">
								<label class="radio-box"><input type="radio"  value="0" name="sendType" th:checked="${integralGoods.sendType} == '0'"> 公司自提</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">商品状态：</label>
							<div class="col-sm-6">
								<label class="radio-box"><input type="radio"  value="0" name="goodsStatus" th:checked="${integralGoods.goodsStatus} == '0'"> 上架</label>
								<label class="radio-box"><input type="radio"  value="1" name="goodsStatus" th:checked="${integralGoods.goodsStatus} == '1'"> 下架</label>
							</div>
						</div>
						<div class="hr-line-dashed"></div>
					</div>
					<div id="tab-2" class="tab-pane">
						<div class="form-group"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-10">
								<input id="goodsDetails" name="goodsDetails" th:field="*{goodsDetails}" type="hidden">
								<div id="editor" class="summernote"></div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: summernote-js" />
	<th:block th:include="include :: jasny-bootstrap-js" />
	<th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
		var prefix = ctx + "business/integralGoods";
		$("#form-integralGoods-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		$(function() {
			$('.summernote').summernote({
				placeholder: '请输入公告内容',
				height : 500,
				width : 1000,
				lang : 'zh-CN',
				followingToolbar: false,
				callbacks: {
					onImageUpload: function (files) {
						sendFile(files[0], this);
					}
				}
			});
			var content = $("#goodsDetails").val();
			$('#editor').summernote('code', content);
		});

		// 上传文件
		function sendFile(file, obj) {
			var data = new FormData();
			data.append("file", file);
			$.ajax({
				type: "POST",
				url: ctx + "business/attachment/upload",
				data: data,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				success: function(result) {
					if (result.code == web_status.SUCCESS) {
						$(obj).summernote('editor.insertImage', result.url, result.fileName);
					} else {
						$.modal.alertError(result.msg);
					}
				},
				error: function(error) {
					$.modal.alertWarning("图片上传失败。");
				}
			});
		}

		$(function(){
			//多文件上传
			$("#fileinput-upload").fileinput({
				language: 'zh',
				'theme': 'explorer-fas',
				'uploadUrl': ctx + 'business/attachment/uploadMore',
				uploadAsync:false,//false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
				overwriteInitial: false, //不覆盖已存在的图片
				initialPreviewAsData: true,
				allowedFileExtensions : ['doc','docx','pdf','PDF',"xls", "xlsx","exe","bmp", "gif", "jpg", "jpeg", "png",
					"ppt", "pptx", "html", "htm", "txt","rar", "zip", "mp3","mp4","MPEG","MP3\MPEG-4","MIDI","WMA"],//接收的文件后缀
				showPreview: true,
				showUpload: true, //是否显示上传按钮
				showCaption: true,//是否显示标题
				maxFileCount: 10, //表示允许同时上传的最大文件个数
				maxFileSize: 200000
			}).on("filebatchuploadsuccess", function(event, data) {
				console.log(data.response.url);
				$("#goodsRolling").val(data.response.url);
			});

			$('#img').on('change.bs.fileinput', function (e) {
				//var img = e.currentTarget.files[0];
				var img = $("#img").get(0).files[0];
				var formData = new FormData();
				formData.append("file", img);
				$.ajax({
					url: ctx + "business/attachment/upload",
					data: formData,
					type: "post",
					processData: false,
					contentType: false,
					success: function(result) {
						$("#goodsCover").val(result.url);
						$("#imgsrc1").attr("src",result.url);
					}
				});
			});
		});

		//删除附件
		$(".delResources").click(function(){
			var attachId = $(this).attr("data-id");//获得参数的值
			$.modal.confirm("确定删除该资源吗？",function(s){
				$.ajax({
					type:'post',
					url: ctx + "business/attachment/remove",
					data:{ids:attachId},
					success:function (result) {

						//..........刷新当前Tab...........
					}
				});
			});
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
				if ($('.summernote').summernote('isEmpty')){
					$.modal.alertWarning("请添加商品详情");
					return;
				}
				var html = $('.summernote').summernote('code');
				$("#goodsDetails").val(html);
	            $.operate.save(prefix + "/edit", $('#form-integralGoods-edit').serialize());
	        }
	    }
	</script>
</body>
</html>
